import React, {Component} from 'react'
import {getRankingList} from 'api/ranking.js'
import Scroll from '../../common/scroll/Scroll'
import './rank.styl'
class Rank extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rankLing: []
        }
    }

    componentDidMount() {
        getRankingList().then(res => {
            if (res) {
                let {data} = res
                this.setState({
                    rankLing: data.topList
                })
            }
        })
    }
    toDetail (id) {
        return () => {
            this.props.history.push({
                pathname: '/rankDetail/' + id
            })
        }

    }
    render() {
        return (
                <div className='rank'>
                    <Scroll>
                        <div>
                            {
                                this.state.rankLing.map((val, index) => (
                                    <div key={index} className='rank_item' onClick={this.toDetail(val.id)}>
                                        <div className='img'>
                                            <img alt='' src={val.picUrl}/>
                                        </div>
                                        <div className='info'>
                                            <h3>{val.topTitle}</h3>
                                            {
                                                val.songList.map((subVal, subIndex) => (
                                                   <p className='song_item' key={subIndex}>
                                                       {subIndex + 1} {subVal.songname} <span> - {subVal.singername}</span>
                                                   </p>
                                                ))
                                            }
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    </Scroll>
                </div>
        )
    }
}

export default Rank